<template>
  <view class="flex flex-col app-container">
    <!-- 头部信息卡片 -->
    <view class="header-card">
      <view class="header-content">
        <wd-row>
          <wd-col :span="24">
            <text class="label">采购单号：</text>
            <text class="value">{{ purchaseOrderInfo.code }}</text>
          </wd-col>
        </wd-row>
        <wd-row class="mt-2">
          <wd-col :span="24">
            <text class="label">供应商：</text>
            <text class="value">{{ purchaseOrderInfo.companyName }}</text>
          </wd-col>
        </wd-row>
      </view>
    </view>

    <scroll-view scroll-y class="mt-4">
      <!-- 产品列表 -->
      <view class="product-list">
        <wd-transition
          :show="!!item.id"
          name="fade-right"
          v-for="item in purchaseOrder"
          :key="item.id"
        >
          <wd-swipe-action>
            <wd-card class="product-card" @tap="handleProductClick(item)">
              <view class="product-content">
                <wd-row>
                  <wd-col :span="24">
                    <text class="product-name">{{ item.productName }}</text>
                  </wd-col>
                </wd-row>
                <wd-row class="mt-2">
                  <wd-col :span="12" class="center">
                    <text class="label">采购重量</text>
                  </wd-col>
                  <wd-col :span="12" class="center">
                    <text class="label">实际重量</text>
                  </wd-col>
                  <wd-col :span="12" class="mt-2 center">
                    <text class="weight">
                      {{ item.qty?.toFixed(2) }}{{ formatUnit(item.unit) }}
                    </text>
                  </wd-col>
                  <wd-col :span="12" class="mt-2 center">
                    <text class="weight">
                      {{ item.receiveTotal || '待称重'
                      }}{{ item.receiveTotal ? formatUnit(item.unit) : '' }}
                    </text>
                  </wd-col>
                </wd-row>
                <wd-tag class="status-tag" type="warning" v-if="item.status === 1">
                  {{ getStatusText(item?.status) }}
                </wd-tag>
                <wd-tag class="status-tag" type="success" v-if="item.status === 0">
                  {{ getStatusText(item?.status) }}
                </wd-tag>
              </view>
            </wd-card>
            <template #right v-if="purchaseOrderInfo.status == 5">
              <view class="print-btn">
                <wd-icon name="print" size="32px" color="#1890ff" @tap="printLabel"></wd-icon>
              </view>
            </template>
          </wd-swipe-action>
        </wd-transition>
      </view>
    </scroll-view>

    <!-- 底部按钮 -->
    <view class="bottom-buttons">
      <view class="flex">
        <wd-button
          type="error"
          class="w-full m-1"
          block
          :round="false"
          @tap="handleReject"
          v-if="purchaseOrderInfo.status == 2"
        >
          拒收
        </wd-button>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import goodsReceiptApi, { PurchaseOrderDetailData, PurchaseOrderListData } from '@/api/goodsReceipt'
import { onLoad } from '@dcloudio/uni-app'
import { ref, computed } from 'vue'
import { useMessage, useToast } from 'wot-design-uni'
import { formatUnit } from '@/utils/unit'
const message = useMessage()
const toast = useToast()

// 采购单数据
const purchaseOrder = ref<PurchaseOrderDetailData[]>([])
const purchaseOrderInfo = ref<PurchaseOrderListData>()

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: '待称重',
    1: '已称重',
  }
  return statusMap[status]
}

// 4部分，5收货完成 6 拒收
// 点击产品进入称重页面
const handleProductClick = (product) => {
  // if (product.status === 1) {
  //   toast.success('该产品已称重')
  //   return
  // }
  if (purchaseOrderInfo.value.status === 5) {
    toast.success('该采购单已完成,请右滑打印标签')
    return
  }
  if (purchaseOrderInfo.value.status === 6) {
    toast.error('该采购单已拒收')
    return
  }

  // 供应商，产品名称，采购重量,采购单号，编号
  uni.navigateTo({
    url: `/pages/weighing/index?purchaseCode=${purchaseOrderInfo.value.code}&productCode=${product.productCode}`,
  })
}

// 拒收处理
const handleReject = () => {
  message
    .confirm({
      title: '确认拒收',
      msg: '是否确认拒收该采购单？',
      confirmButtonText: '确认拒收',
    })
    .then(async () => {
      // TODO: 调用拒收API
      try {
        await goodsReceiptApi.refusePurchaseOrder(purchaseOrderInfo.value.code)
        // 更新页面状态
        toast.success('拒收成功')
        // 返回上一页刷新数据
        uni.navigateBack()
      } catch (error) {
        toast.error('拒收失败')
      }
    })
}

// 根据单号获取详情
const getPurchaseOrder = (code) => {
  goodsReceiptApi.getPurchaseOrderDetail(code).then((res) => {
    console.log(res, 'res')

    purchaseOrder.value = res.data
  })
}
// 根据单号获取采购单信息
const getPurchaseOrderInfo = (code) => {
  goodsReceiptApi
    .getPurchaseOrderList({ code, statusList: [1, 2, 3, 4, 5, 6], pageNum: 1, pageSize: 1 })
    .then((res: any) => {
      console.log(res, 'res')
      purchaseOrderInfo.value = res.data.list[0]
    })
}

// 打印标签
const printLabel = () => {
  // TODO: 调用打印API
  try {
    // 调用打印API
    toast.success('标签已发送至打印机')
  } catch (error) {
    toast.error('打印失败，请检查打印机连接状态')
  }
}

onLoad((options) => {
  nextTick(() => {
    getPurchaseOrder(options.code)
    getPurchaseOrderInfo(options.code)
  })
})
onShow(() => {
  nextTick(() => {
    getPurchaseOrder(purchaseOrderInfo.value.code)
    getPurchaseOrderInfo(purchaseOrderInfo.value.code)
  })
})
</script>

<style lang="scss" scoped>
$primary-color: #3e7bfa;
$secondary-color: #36b8c2;
$success-color: #67c23a;
$warning-color: #e6a23c;
$danger-color: #f56c6c;
$background-color: #f5f7fa;
$card-background: #ffffff;
$text-primary: #303133;
$text-secondary: #606266;
$border-color: #ebeef5;
$box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
$detail-primary: #1989fa;
$detail-success: #00b578;
$detail-danger: #ff4d4f;
$detail-warning: #ff9f00;
$card-gradient: linear-gradient(145deg, #ffffff, #f8faff);
$card-hover-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
$transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

$spacing-base: 24rpx;
$card-radius: 16rpx;
$section-margin: $spacing-base * 1.5;
.app-container {
  // height: calc(100vh - 100rpx);
  height: 100vh;
}
.header-card {
  position: relative;
  padding: 0 20rpx;

  overflow: hidden;
  transition: $transition-base;

  .header-content {
    position: relative;
    z-index: 1;

    .label {
      font-size: 28rpx;
      color: rgba($text-secondary, 0.9);

      letter-spacing: 1rpx;
    }

    .value {
      font-size: 32rpx;
      font-weight: 600;
      color: $detail-primary;
      text-shadow: 0 2rpx 4rpx rgba($detail-primary, 0.1);
    }
  }
}

.product-list {
  padding: 0 20rpx;
  .product-card {
    position: relative;
    border-left: 6rpx solid transparent;
    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
    transition: $transition-base;

    &:active {
      transform: scale(0.98);
    }

    &.swipe-active {
      border-left-color: $detail-primary;
    }

    .product-content {
      .product-name {
        position: relative;
        padding-left: 40rpx;
        font-size: 34rpx;

        &::before {
          position: absolute;
          top: -2rpx;
          left: 0;
          font-size: 28rpx;
          content: '📦';
        }
      }

      .weight {
        font-family: 'DIN Alternate';
        &.highlight {
          color: $detail-success;
          text-decoration: underline;
          text-underline-offset: 4rpx;
        }
      }
    }

    // 状态标签重设计
    .status-tag {
      position: absolute;
      top: 24rpx;
      right: 8rpx;
      padding: 8rpx 24rpx;
      clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0 100%, 0 0);
      font-weight: 500;

      &[type='warning'] {
        background: rgba($warning-color, 0.15) !important;
        border: 1rpx solid rgba($warning-color, 0.3);
      }

      // 已完成状态
      &[type='success'] {
        background: rgba($success-color, 0.15) !important;
        border: 1rpx solid rgba($success-color, 0.3);
      }
    }
  }
}
.print-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100rpx;
  height: 100%;
  transition: $transition-base;

  &:active {
    transform: scale(0.95);
  }
}
.bottom-buttons {
  height: 100rpx;
}

.mt-2 {
  margin-top: 16rpx;
}
// 新增动画
@keyframes shine {
  0% {
    transform: translateX(-50%) rotate(15deg);
  }
  100% {
    transform: translateX(50%) rotate(15deg);
  }
}
</style>
